<template>

  <data-table
    ref="pagingTable"
    :options="options"
    :list-query="listQuery"
  >
    <template #filter-content/>

    <template #data-columns>

      <el-table-column
        label="考试名称"
        prop="title"
        show-overflow-tooltip
      />


      <el-table-column
        label="协作方式"
        align="center"
        prop="reviewType_dictText"
        width="180px"
      />

      <el-table-column
        label="阅卷时间"
        width="320px"
        align="center"
      >

        <template v-slot="scope">
          {{ scope.row.startTime }} ~ {{ scope.row.endTime }}
        </template>

      </el-table-column>


      <el-table-column
        label="试卷总数"
        prop="total"
        align="center"
        width="100px"
      />


      <el-table-column
        label="待阅试卷"
        prop="unrated"
        align="center"
        width="100px"
      />

      <el-table-column
        label="已阅试卷"
        prop="reviewed"
        align="center"
        width="100px"
      />

      <el-table-column
        label="阅卷状态"
        align="center"
        width="150px"
        prop="reviewState_dictText"
      />

      <el-table-column
        label="状态"
        width="150px"
        align="center">
        <template v-slot="{row}">
          <span v-if="row.timeState===10" style="color: #f0ad4e">批阅时间未到</span>
          <span v-else-if="row.timeState===11" style="color: #ff3333">时间已截止</span>
          <span v-else-if="row.timeState===3" style="color: #1aac1a">可批阅</span>
          <span v-else>--</span>
        </template>

      </el-table-column>

      <el-table-column
        label="操作"
        fixed="right"
        align="center"
        width="150px"
      >
        <template v-slot="scope">
          <el-link :disabled="scope.row.timeState!==3" type="primary" icon="el-icon-video-play" @click="toMatchList(scope.row.id)">批阅/查看</el-link>
        </template>

      </el-table-column>

    </template>

  </data-table>


</template>

<script>

export default {
  name: 'FreePreview',
  data() {
    return {

      listQuery: {
        current: 1,
        size: 10,
        params: {
          name: ''
        }
      },

      options: {
        // 可批量操作
        multi: false,
        // 列表请求URL
        listUrl: '/api/exam/review/review/paging-free'
      }
    }
  },
  activated() {
    this.$refs.pagingTable.refresh()
  },
  methods: {
    toMatchList(id) {
      this.$emit('match', id)
    }
  }
}
</script>
